$(function () {
    getCateList()

    //添加分类
    // 在js中写的html没有语法高亮,不好维护
    var index;
    $('#add-btn').click(function () {
        index = layui.layer.open({
            title: '添加文章分类',
            content: $('#tpl1').html(),
            area: ['500px', '260px'],//设置宽高
            type:1//ayer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用 layer.open({type: 1})方式调用，则type为必填项（信息框除外）
        });
    })

    //添加提交事件
    // 事件要想绑定成功，必须页面打开的时候这个元素就要有

    $('body').on('submit','#f1',function(e){
        e.preventDefault()
        // 收集表单数据 -> 发送ajax请求
        // jq自动收集表单数据方法 serialize 
        // console.log($(this).serialize());
        $.ajax({
            method:'POST',
            url:'/my/article/addcates',
            data:$(this).serialize(),
            success:function(res){
                if (res.status !== 0) return layer.msg(res.message)
                // 由于添加成功了,所以我们需要重新渲染页面,因为页面上的数据变旧了
                getCateList()
                // 关闭弹出层
                layui.layer.close(index)
            }
        })
    })


    // 编辑分为两步
    // 第一步 点击的时候弹出表单(表单默认有值的)
    
    
    var index2;
    $('body').on('click','.edit-btn',function(){
        var id = $(this).attr('data-id')
        if(id == 1 || id == 2){
            return layui.layer.msg('不允许修改', {icon: 5,time:2000});
        }
        $.ajax({
            method:'GET',
            // :id的意思是这块是将来要放id的地方 占位符  
            // 替换成真实的id值
            url:'/my/article/cates/'+id,
            success:function(res){
                if (res.status !== 0) return layer.msg(res.message)
                console.log(res);
                layui.form.val('f2',res.data)
            }
        })
        index2 = layui.layer.open({
            title: '修改文章分类',
            content: $('#tpl2').html(),
            area: ['500px', '260px'],//设置宽高
            type:1//ayer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用 layer.open({type: 1})方式调用，则type为必填项（信息框除外）
        });
    })

    // 第二步 对表单进行提交    
    $('body').on('submit','#f2',function(e){
        e.preventDefault()
        $.ajax({
            method:'POST',
            url:'/my/article/updatecate',
            data:$(this).serialize(),
            success:function(res){
                if (res.status !== 0) return layer.msg(res.message)
                getCateList()
                // 关闭弹出层
                layui.layer.close(index2)
            }
        })
    })

    // 删除的功能

    $('body').on('click','.delete-btn',function(){
        var id = $(this).attr('data-id')
        if(id == 1 || id == 2){
            return layui.layer.msg('不允许删除', {icon: 5,time:2000});
        }
        
        layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                method:'GET',
                url:`/my/article/deletecate/${id}`,
                success:function(res){
                    console.log(2);
                    if (res.status !== 0) return layer.msg(res.message)
                    getCateList()
                    layer.close(index);
                }
            })

            
        });
    })
})

function getCateList() {
    $.ajax({
        method: 'GET',
        url: '/my/article/cates',
        success: function (res) {
            if (res.status !== 0) return layer.msg(res.message)
            console.log(res);
            var htmlStr = template('tpl', res)
            $('tbody').html(htmlStr)
        }
    })
}